<template>
  <div class="status">
    <a-card class="card" size="small"  style="width: 100%">
<!--      <a-form :layout="formState.layout" :model="formState" v-bind="formItemLayout">-->
<!--        <a-form-item label="用户账号/昵称">-->
<!--          <a-row  :gutter="16">-->
<!--            <a-col :md="12"  flex="auto">-->
<!--              <a-input v-model:value="formState.fieldA" placeholder="input placeholder" />-->
<!--            </a-col>-->
<!--            <a-col>-->
<!--              <a-button type="primary">Submit</a-button>-->
<!--            </a-col>-->
<!--          </a-row>-->
<!--        </a-form-item>-->

<!--      </a-form>-->
      <a-table
          :pagination="pagination"
          @change="handleTableChange"
          :columns="columns"
          :data-source="data">
        <template  #bodyCell="{ index,column, text ,record}">
          <template v-if="column.dataIndex === 'nickName'">
            <a style="cursor: pointer" @click="() => {$router.push(`/user/${record.userId}`)}" >{{ record.userVO?.nickName }}</a>
          </template>
          <template v-else-if="column.dataIndex === 'avatar'">
            <a-avatar style="cursor: pointer" @click="() => {$router.push(`/user/${record.userId}`)}" :src="record.userVO?.avatar" />
          </template>
          <template v-else-if="column.dataIndex === 'index'">
            <span>{{ index + 1 }}</span>
          </template>
          <template v-else-if="column.dataIndex === 'percent'">
            <span>{{ (((record.acTotal / record.total))*100).toFixed(2) }}%</span>
          </template>
          <template v-else>
            <span>{{ text }}</span>
          </template>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script lang="ts" setup>

import type { UnwrapRef } from 'vue';
import {getRanks} from "@/api/judge";

const loading = ref<boolean>(false)
onMounted(async () => {
  loading.value = true;
  const res = (await getRanks({})).data
  data.value = res.rows;
  pagination.total = res.total
  loading.value = false;

})

//筛选
interface FormState {
  layout: 'horizontal' | 'vertical' | 'inline';
  fieldA: string;
  fieldB: string;
}
const formState: UnwrapRef<FormState> = reactive({
  layout: 'horizontal',
  fieldA: '',
  fieldB: '',
});
const formItemLayout = computed(() => {
  const { layout } = formState;
  return layout === 'horizontal'
      ? {
        wrapperCol: { span: 22 },
      }
      : {};
});

//表格
const current = ref(1)
const pageSize = ref(5);
const pagination = reactive({
  total: 0,
  current: 1,
  pageSize: 10,
  pageSizeOptions:['5', '10', '15', '20']

});
const handleTableChange = (p, filters, sorter) => {
  pagination.current = p.current
  pagination.pageSize= p.pageSize
}
const columns = [
  {
    title: '名次',
    dataIndex: 'index',
    key: 'index',
  },
  {
    title: '头像',
    dataIndex: 'avatar',
    key: 'avatar',
  },
  {
    title: '昵称',
    dataIndex: 'nickName',
    key: 'nickName',
  },

  {
    title: 'AC',
    dataIndex: 'acTotal',
    key: 'acTotal',
  },
  {
    title: '总提交',
    dataIndex: 'total',
    key: 'total',
  },
  {
    title: 'AC率',
    dataIndex: 'percent',
    key: 'percent',
  },
];
const data = ref([]);



</script>
<style scoped>

</style>
